<template>
	<view class="detail_wrap">
		
		<button @click="showBox()" v-if="topShow">点击</button>
		
		
		<view v-if="leaveShow">
			<view class="detail_box top box1 animate__fadeInDownBig">
			 	<view class="detail_item ">
			 		<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
			 		<view class="text">
			 			qqqqqq
			 		</view>
			 		<view class="detail_text">
			 			拒提100大王币
			 		</view>
			 	</view>
			 	<view class="detail_item">
			 		<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
			 		<view class="text">
			 			qqqqqq
			 		</view>
			 		<view class="detail_text">
			 			拒提100大王币
			 		</view>
			 	</view>
			 </view>
			
			
			<view class="detail_box box2 animate__fadeInDownBig">
				<view class="detail_item">
					<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</view>
				<view class="detail_item">
					<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</view>
				<view class="detail_item">
					<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		<view v-if = 'handleShow'>
			<view class="detail_box top box4 animate__fadeOutLeft">
			 	<view class="detail_item ">
			 		<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
			 		<view class="text">
			 			qqqqqq
			 		</view>
			 		<view class="detail_text">
			 			拒提100大王币
			 		</view>
			 	</view>
			 	<view class="detail_item">
			 		<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
			 		<view class="text">
			 			qqqqqq
			 		</view>
			 		<view class="detail_text">
			 			拒提100大王币
			 		</view>
			 	</view>
			 </view>
			
			<view class="detail_box box2 animate__fadeOutLeft">
				<view class="detail_item">
					<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</view>
				<view class="detail_item">
					<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</view>
				<view class="detail_item">
					<image :src="iconurl + '/static/user/userbj.png'" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</view>
			</view>
		</view>
		
		<button @click="handleLeave()" v-if="showLeave" style="margin-top: 100rpx;">离开</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				// show: true,
				// butShow: true,
				topShow: true,
				leaveShow:false,
				showLeave:false,
				handleShow:false,
				iconurl:this.$configs.urls
			}
		},
		onReady() {
			// this.$refs.ani.init({
			// 	duration: 1000,
			// 	timingFunction: 'linear',
			// 	transformOrigin: '50% 50%',
			// 	delay: 500
			// })
		},

		methods: {
			showBox() {
				this.topShow = false
				setTimeout( () => {
					this.leaveShow = true
				},3000)
				 clearTimeout();
				this.showLeave = true
			},
			handleLeave(){
				this.leaveShow = false
				this.handleShow = true
				setTimeout( () => {
					uni.navigateBack()
				},3000)
				 clearTimeout();
			},
			open(mode) {
				this.show = !this.show
			},
			change() {
				////console.log('触发动画')
				
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.detail_wrap {
		padding: 30rpx;

		.box1 {
			display: flex;
			text-align: center;
			margin-bottom: 40rpx;
			animation-duration: 1s;
			animation-delay: 1s; //延迟时间
			// animation-iteration-count: infinite; //是否循环播放
		}

		.box3 {
			display: none;
		}
		
		.box4{
			display: flex;
			text-align: center;
			margin-bottom: 40rpx;
			animation-duration: 2s;
			animation-delay: 2s; //延迟时间
		}

		.box2 {
			display: flex;
			z-index: 100;
			animation-duration: 2s;
			animation-delay: 2s; //延迟时间
		}

		.detail_box {
			display: flex;
			align-items: center;

			.detail_item {
				flex: 1;

				image {
					width: 200rpx;
					height: 300rpx;
				}

				.text {}

				.detail_text {
					width: 200rpx;
					text-align: center;
					margin: auto;
				}
			}

		}
	}
</style>
